<template>
  <g 
    class="workflow-connection" 
    :class="{ 
      'selected': isSelected,
      'highlighted': isHighlighted 
    }"
    @click.stop="selectConnection"
  >
    <path 
      :d="connectionPath" 
      :stroke="connectionColor" 
      stroke-width="2" 
      fill="none" 
      :marker-end="`url(#arrowhead-${connection.id})`"
    />
    
    <defs>
      <marker
        :id="`arrowhead-${connection.id}`"
        viewBox="0 0 10 10"
        refX="8"
        refY="5"
        markerWidth="6"
        markerHeight="6"
        orient="auto"
      >
        <path d="M 0 0 L 10 5 L 0 10 z" :fill="connectionColor" />
      </marker>
    </defs>
    
    <!-- 连接中点的删除按钮 -->
    <g 
      v-if="isSelected" 
      class="connection-controls"
      :transform="`translate(${midPoint.x}, ${midPoint.y})`"
      @click.stop="deleteConnection"
    >
      <circle 
        r="12" 
        fill="white" 
        stroke="#f56c6c" 
        stroke-width="1"
      />
      <circle 
        r="8" 
        fill="#f56c6c" 
      />
      <text 
        x="0" 
        y="4" 
        text-anchor="middle" 
        fill="white" 
        font-size="12"
        font-weight="bold"
      >×</text>
    </g>
  </g>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useWorkflowStore } from '@/store/workflow';

const props = defineProps({
  connection: {
    type: Object,
    required: true
  },
  nodes: {
    type: Array,
    required: true
  }
});

const workflowStore = useWorkflowStore();

// 判断是否被选中
const isSelected = computed(() => {
  return workflowStore.selectedConnectionId === props.connection.id;
});

// 判断是否被高亮
const isHighlighted = computed(() => {
  return workflowStore.highlightedConnectionIds.includes(props.connection.id);
});

// 连接颜色
const connectionColor = computed(() => {
  if (isSelected.value) return '#ff9900';
  if (isHighlighted.value) return '#67c23a';
  return '#409EFF';
});

// 获取源节点和目标节点
const sourceNode = computed(() => {
  return props.nodes.find(node => node.id === props.connection.sourceNodeId);
});

const targetNode = computed(() => {
  return props.nodes.find(node => node.id === props.connection.targetNodeId);
});

// 获取源端口和目标端口的位置
const sourcePort = computed(() => {
  if (!sourceNode.value) return { x: 0, y: 0 };
  
  const portIndex = sourceNode.value.outputs.findIndex(
    port => port.id === props.connection.sourcePortId
  );
  
  if (portIndex === -1) return { x: 0, y: 0 };
  
  // 修正右侧锚点位置
  return {
    x: sourceNode.value.position.x + 180, // 节点宽度
    y: sourceNode.value.position.y + 40 + (portIndex * 30) + 15 // 加15使其垂直居中
  };
});

const targetPort = computed(() => {
  if (!targetNode.value) return { x: 0, y: 0 };
  
  const portIndex = targetNode.value.inputs.findIndex(
    port => port.id === props.connection.targetPortId
  );
  
  if (portIndex === -1) return { x: 0, y: 0 };
  
  return {
    x: targetNode.value.position.x, // 左侧锚点
    y: targetNode.value.position.y + 40 + portIndex * 30 + 15 // 加15使其垂直居中
  };
});

// 计算连接路径
const connectionPath = computed(() => {
  const source = sourcePort.value;
  const target = targetPort.value;
  
  // 计算控制点
  const dx = Math.abs(target.x - source.x);
  const dy = Math.abs(target.y - source.y);
  
  // 使用更平滑的贝塞尔曲线
  const controlPointOffset = Math.min(150, dx * 0.7);
  
  return `M ${source.x} ${source.y} C ${source.x + controlPointOffset} ${source.y}, ${target.x - controlPointOffset} ${target.y}, ${target.x} ${target.y}`;
});

// 计算连接中点，用于放置删除按钮
const midPoint = computed(() => {
  const source = sourcePort.value;
  const target = targetPort.value;
  
  // 贝塞尔曲线的中点不是两点的中点，这里做一个近似
  const t = 0.5; // 参数 t = 0.5 表示曲线的中点
  const dx = Math.abs(target.x - source.x);
  const controlPointOffset = Math.min(150, dx * 0.7);
  
  const p0 = { x: source.x, y: source.y };
  const p1 = { x: source.x + controlPointOffset, y: source.y };
  const p2 = { x: target.x - controlPointOffset, y: target.y };
  const p3 = { x: target.x, y: target.y };
  
  // 三次贝塞尔曲线的参数方程
  const x = Math.pow(1-t, 3) * p0.x + 
            3 * Math.pow(1-t, 2) * t * p1.x + 
            3 * (1-t) * Math.pow(t, 2) * p2.x + 
            Math.pow(t, 3) * p3.x;
            
  const y = Math.pow(1-t, 3) * p0.y + 
            3 * Math.pow(1-t, 2) * t * p1.y + 
            3 * (1-t) * Math.pow(t, 2) * p2.y + 
            Math.pow(t, 3) * p3.y;
  
  return { x, y };
});

// 选中连接
function selectConnection() {
  workflowStore.selectConnection(props.connection.id);
}

// 删除连接
function deleteConnection() {
  workflowStore.deleteConnection(props.connection.id);
}
</script>

<style scoped>
.workflow-connection {
  cursor: pointer;
  pointer-events: all;
}

.workflow-connection.selected path {
  stroke-width: 3;
}

.workflow-connection.highlighted path {
  stroke-width: 2.5;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { opacity: 0.7; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

.connection-controls {
  cursor: pointer;
  pointer-events: all;
}
</style>